/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { FC, useEffect, useState } from 'react'
import style from '@/style/index.module.scss'
import http from '@/api/request'
import CenterRightTwo from '@/components/center/CenterRightTwo'
import CenterRightOne from '@/components/center/CenterRightOne'
import { useTranslation } from 'react-i18next'
const KnowledgeBooks: FC = () => {
  const [data, setData] = useState([])
  const { t } = useTranslation()
  useEffect(() => {
    void http.get('/wipi/api/Knowledge').then((res) => {
      setData(res.data[0])
    })
  }, [])
  return <div className={style.knowledgebooks}>
    <div className={style.knowleft}>
      {
        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
        data.length > 0
          ? data.map((item: any, index: any) => {
            return <div key={index} className={style.knowheaderbox}>
            <div className={style.knowheaderbox2}>
              <div className={style.knowheaderboxheader}>
                <span className={style.span1}>{item.title} </span>
                <span>{item.updateAt}</span>
              </div>
              <div className={style.knowheaderboxmain}>
                <img src={item.cover} alt="" />
                <div className={style.knowheaderboxmainright}>
                  {item.summary}
                </div>

              </div>
            </div>
          </div>
          })
          : <div className={style.cen}>{t('NoData')}</div>
      }
    </div>
    <div className={style.centerright}>
         <div className={style.topbox}>
           <CenterRightOne></CenterRightOne>
         </div>
         <div className={style.botbox}>
          <CenterRightTwo></CenterRightTwo>
         </div>
      </div>
  </div>
}

export default KnowledgeBooks
